<template>
    <div class="none-button">
        <el-button icon="el-icon-date" style="color: rgb(127, 181, 245); "></el-button>
        <span>{{ currentDate }}</span>
        <span>{{ currentWeek }}</span>
        <el-divider></el-divider>
        <div class="block">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                    :type="activity.type" :color="activity.color" :size="activity.size">
                    {{ activity.content }}
                    <div style="margin-top: 1rem">
                        <el-button type="primary">{{ activity.button }}</el-button>
                    </div>
                </el-timeline-item>
                <div
                    style="background-color: rgb(242, 242, 242); width: 19.5rem; height: 3rem; text-align: center; line-height: 3rem; margin-left: -3.25rem;margin-top:-0.1rem">
                    <div>如有打卡异常，请 <span style="color: rgb(61, 125, 215);" @click="handleClick">提交考勤流程>></span></div>
                </div>
            </el-timeline>
            <div style="margin-top: 1rem; margin-left: 2rem;">
                <i class="el-icon-s-data"><span style="color: rgb(61, 125, 215);" @click="handleClick1"> 考勤统计</span></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date: new Date(),
            activities: [{
                content: '上班时间 09:00',
                button: '上班打卡',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-suitcase-1',
                color: '#b4b4b4'
            }, {
                content: '下班时间 18:00',
                button: '下班打卡',
                icon: 'el-icon-hot-water',
                color: '#b4b4b4',
            }]
        };
    },
    methods: {
        handleClick() {

        },
    },
    computed: {
        currentDate() {
            const year = this.date.getFullYear();
            const month = this.date.getMonth() + 1; // 月份从0开始，所以需要+1
            const day = this.date.getDate();
            return `${year}-${month}-${day}`;
        },
        currentWeek() {
            const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const week = this.date.getDay();
            return weeks[week];
        }
    }
}
</script>

<style>
.none-button .el-button {
    border: none;
}

.el-timeline-item__content {
    min-height: 40px;
    /* 设置最小高度为100px */
}
</style>